import {messages} from "share/common";
import React from 'react'
import {connect} from 'react-redux'
import { Button, Table, message, Modal } from 'antd';
import SlideFrame from 'components/slide-frame';
import ValidateRule from "containers/financial-account/doc-template/validate-rule";
import docTemplateService from "containers/financial-account/doc-template/doc-template-service";

class templateRow extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      setOfBooksId: this.props.company.setOfBooksId,
      columns: [
        {title: messages('financial-account.key25')/*规则名称*/, dataIndex: 'ruleName'},
        {title: messages('common.column.status')/*状态*/, dataIndex: 'isEnable', render: (value) => value ? messages('common.valid')/*生效*/ : messages('financial-account.key6')/*不生效*/},
        {title: messages('common.operation')/*操作*/, dataIndex: 'operation', render: (value,record) => {
            return <div>
              <a onClick={e => this.handleEdit(e,record)}>{messages('common.edit')/*编辑*/}</a>
              <span className="ant-divider"/>
              <a onClick={() => Modal.confirm({
                title: messages('financial-account.key196')/*确认删除*/,
                content: messages('financial-account.key201')/*删除后将会影响凭证的生成，请确认！*/,
                onOk: () => this.handleDelete(record)
              })}>{messages('common.delete')/*删除*/}</a>
            </div>
          }},
      ],
      data: [],
      loading: false,
      pagination: {
        total: 0
      },
      page: 0,
      showSlideFrame: false,
      title: '',
      editRecord: {},
    }
  }

  componentWillMount() {
    this.setState({setOfBooksId: this.props.setOfBooksId}, () => {
      this.getList();
    });
  }

  componentWillReceiveProps(nextProps) {
    this.setState({setOfBooksId: nextProps.setOfBooksId},() => {
      this.getList();
    })
  }

  getList = () => {
    const { setOfBooksId, page } = this.state;
    let temp = {
      page,
      setOfBooksId
    };
    this.setState({loading: true});
    docTemplateService.getValidateList(temp).then(res => {
      this.setState({
        loading: false,
        data: res.data.rows,
        pagination: {
          total: Number(res.data.total),
          current: page + 1,
          onChange: this.onChangePager,
        }
      });
    }).catch(e => {
      message.error(e.response.data.message);
      this.setState({loading: false})
    })
  };

  handleDelete = record => {
    docTemplateService.deleteValidateRule(record.journalRuleDetailId).then(() => {
      message.success(messages('common.delete.successful')/*删除成功*/);
      this.setState({ page: 0 }, () => {
        this.getList();
      })
    }).catch(e => {
      message.error(e.response.data.message);
    });
  };

  onChangePager = (page) => {
    if (page - 1 !== this.state.page)
      this.setState({
        page: page - 1
      }, () => {
        this.getList();
      })
  };

  handleEdit = (e,record) => {
    e.stopPropagation();
    this.setState({
      title: messages('financial-account.key26')/*编辑凭证校验规则定义*/,
      editRecord: record
    },() => {
      this.setState({showSlideFrame: true});
    })
  };

  handleAdd = () => {
    this.setState({
      title: messages('financial-account.key27')/*新建凭证校验规则定义*/,
      editRecord: {}
    },() => {
      this.setState({showSlideFrame: true});
    })
  };


  isRefresh = (isRefresh) => {
    this.setState({showSlideFrame: false});
    isRefresh === true && this.getList();
  };

  render(){
    const { columns, data, loading, pagination, title, editRecord, showSlideFrame, setOfBooksId } = this.state;
    return(
      <div>
        <div style={{marginBottom:'10px'}}>
          <Button type='primary' onClick={this.handleAdd}>{messages('common.create')/*新建*/}</Button>
        </div>
        <Table columns={columns}
               dataSource={data}
               loading={loading}
               rowKey={'id'}
               pagination={pagination}
               bordered/>
        <SlideFrame show={showSlideFrame}
                    title={title}
                    params={{
                      showSlideFrame,
                      editRecord,
                      setOfBooksId
                    }}
                    content={ValidateRule}
                    onClose={(isRefresh) => this.isRefresh(isRefresh)}
                    afterClose={(isRefresh) => this.isRefresh(isRefresh)}/>
      </div>
    )
  }
}

function mapStateToProps(state){
  return {
    company: state.login.company
  }
}

export default connect(mapStateToProps)(templateRow);
